{include file="public/head" title="维修" keywords="维修" description="维修" /}
<style>

    .uploadImg{cursor:pointer; overflow:hidden; position:relative;width: 5rem;height: 5rem;}
    .file{ cursor:pointer;position:absolute; z-index:100; left:0;top:0;width: 5rem;height: 5rem;opacity:0;filter:alpha(opacity=0);}
    .uploadImg a{cursor:pointer;margin-top:0.5rem;top:0.5rem;left:0;display: block;width: 5rem;height: 5rem;text-align: center;line-height:  5rem;color:white;font-size:14px;font-weight:normal;}
</style>
<div id="offCanvasWrapper" class="mui-off-canvas-wrap mui-draggable">
    <!-- 菜单容器 -->

    <div class="mui-inner-wrap">
        <div id="offCanvasContentScroll" class="mui-content mui-scroll-wrapper" style="background-color: #fff;">
            <div class="mui-scroll">
                <header class="tx_head">
                    <p>
                        <a href="{:url('index')}" class="header_p1"><span class="mui-icon mui-icon-arrowleft"></span></a>
                    <h5 >维修清单</h5>
                    </p>
                </header>
                <main class="wdzh_main">
                    <section class="">
                        <ul class="" id="addpeijian">
                            <li class="jyjl_li" style="border-bottom: 7px solid #f3f3f3;line-height: 0;height: 0.1rem;">
                            </li>
                            <form id="fromId" >
                            <li  class="toauth">
                                <button type="submit" id="add"  style="float: left; margin: 0.64rem; border-color: #01cebf;color: #01cebf;">添加</button>
                                <button type="submit" id="del"  style="float: left; margin: 0.64rem; border-color: #01cebf;color: #01cebf;">删除</button>
                            </li>
                                <span id="queryinput">
                                </span>
                            <li>
                                <button type="submit" id="btn" style="width: 90%;margin-left: 5%; border-color: #01cebf;color: #01cebf;">提交</button>
                            </li>
                            </form>
                        </ul>
                        <ul class="" id="zferweima" style="display: none">
                            <li class="jyjl_li" style="border-bottom: 7px solid #f3f3f3;line-height: 0;height: 0.1rem;">
                            </li>
                            <li  class=""style="height: 20rem;line-height: 20rem;clear: both">
                                <p style="font-size: 14px;text-align: center;height: 20rem;line-height: 20rem;margin: 0 auto"> 您已添加配件信息.......</p>
                            </li>
                            <li>
                                <button type="submit" id="btn1" style="width: 90%;margin-left: 5%; border-color: #01cebf;color: #01cebf;">去支付</button>
                            </li>
                        </ul>
                    </section>
                </main>

                <br>
                <br>
                <br>
                <br>
                <br>
                <br>
            </div>
        </div>
        <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>
<input type="hidden" id="orderid" value="{$id}">
{include file="public/footer"}
</body>
<script>
    $(function () {
        var status = {$status};
        if (status){
            $('#addpeijian').css('display','none');
            $('#zferweima').css('display','block');
        }else {
            $('#addpeijian').css('display','block');
            $('#zferweima').css('display','none');
        }



    })
    function upimg(i) {
        var reads= new FileReader();
        f=document.getElementById('file_'+i).files[0];
        reads.readAsDataURL(f);
        reads.onload=function (e) {


            $.ajax({
                type:"post",
                url:'{:url("uplaodimg")}',
                dataType:"json",
                data:{file:this.result},
                success: function(data){
                    if(data.code == 1){
                        layer.msg(data.msg, {icon: 6, time: 1000},function(){

                            $('#img_'+i).attr('src',data.data.src);
                            $('input[name="goods['+x+'][img]"').val(data.data.src);
                        });
                    }else{
                        layer.msg(data.msg, {icon: 5, time: 2000});
                    }
                }
            });
        };
    }


    var MaxInputs = 20;
    var queryinput = $("#queryinput");
    var add = $("#add");
    var x = queryinput.length-1;
    var FieldCount=0;

    $("#add").click(function (e)
    {
        if(x <= MaxInputs)
        {
            var addstr = '<li class="toauth" style="height: 2.5rem;line-height: 2.5rem">'+
                    '<input type="hidden" name="goods['+x+'][img]">'+
                '<span class="" style="font-size: 1rem;border-bottom: 1px solid #eee;">'+
            '<input type="text" class="peijian" name="goods['+x+'][peijian]" placeholder="配件名'+(x+1)+'" style=" font-size:0.7rem;  border: 1px solid #efefef;border-radius: 10px;margin: 0px;color: #01cebf;">'+
            '<input type="text" class="price" name="goods['+x+'][price]"  placeholder="价格(元)'+(x+1)+'" style=" font-size:0.7rem; border: 1px solid #efefef;border-radius: 10px;margin: 0px;color: #01cebf;">'+
            '<input type="text" class="price" name="goods['+x+'][chengben]"  placeholder="成本(元)'+(x+1)+'" style=" font-size:0.7rem; border: 1px solid #efefef;border-radius: 10px;margin: 0px;color: #01cebf;">'+
            '<input type="text" class="mun" name="goods['+x+'][mun]"  placeholder="数量'+(x+1)+'" style="  font-size:0.7rem;border: 1px solid #efefef;border-radius: 10px;margin: 0px;color: #01cebf;">'+
           '<span class="uploadImg"> '+
                    '<p  width: 4rem;>配件图片</p>'+
                '<input type="file" class="file"id="file_'+x+'" onchange="upimg('+x+')" size="1"style="margin-left: 5rem; margin-top: -2rem;" >'+
            '<a href="#"  accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" >'+
            '<img src="/static/wap/20181201173806.png" id="img_'+x+'" style="width: 5rem; height: 5rem;border: 1px solid #f2f2f2;margin-left: 5rem; margin-top: -2rem;" />'+
            '</a>'+
            '</span>'+
           '</span></li>';
            FieldCount++;
            $("#queryinput").append(addstr);
            x++; //text box increment
        }
        return false;
    });
    $('#del').click(function () {
        var last = $('#queryinput').find('li:last-child').remove()
        console.log(last)
    })
    $('#btn').click(function (event) {
        var orderid = $('#orderid').val();
        // var goods = {};
        // var zongjia  = 0;
        // var peijian, price, mun = 0
        //
        // var arrUl = jQuery("#queryinput > li");
        // jQuery.each(arrUl, function(i){
        //     goods[i] = {};
        //     goods[i]['peijian'] =  jQuery(this).find("input[class='peijian']").val();
        //     goods[i]['price'] =  jQuery(this).find("input[class='price']").val();
        //     goods[i]['mun'] =  jQuery(this).find("input[class='mun']").val();
        //     zongjia += ( goods[i]['price'] *  goods[i]['mun']);
        //     if (goods[i]['peijian'].length < 1){peijian = 1;return false;}
        //     if (goods[i]['price'].length < 1){ price = 1;return false;}
        //     if (goods[i]['mun'].length < 1){mun = 1;return false; }
        // });
        // if (1 == peijian){layer.msg('请填写配件名',{icon:2,time:3000},function () {return false;})}
        // if (1 == price){layer.msg('请填写配件价格',{icon:2,time:3000},function () {return false;})}
        // if (1 == mun){layer.msg('请填写配件数量',{icon:2,time:3000},function () {return false;})}
        //
        // if (!zongjia){layer.msg('请填写正确的配件信息',{icon:2,time:1300})
        //     return false;
        // }
        var goods = $('#fromId').serializeArray();
        console.log(goods);
        event.preventDefault();
        $.ajax({
            url:'addweixiou',
            type:'post',
            dataType:'json',
            data:{goods:goods,orderid:orderid},
            success:function (res) {
                if (res.code == 1){
                    layer.msg(res.msg,{icon:1,time:1000})
                    window.location.href = res.url;
                }else {
                    layer.msg(res.msg,{icon:2,time:1000})
                }
            }
        })
    })
    
    $('#btn1').click(function () {
        var order_mun = $('#orderid').val();
        window.location.href =" {:url('topany/topay')}"+'?order_mun='+order_mun;
    })
</script>
</html>